<template>
    <div class="notice-detail-container">
        <!-- 返回按钮 -->
        <div class="back-button">
            <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>

        <!-- 通知详情卡片 -->
        <el-card class="notice-card">
            <!-- 通知标题 -->
            <div class="notice-title">
                <h2>{{ notice.title }}</h2>
            </div>

            <!-- 通知元信息 -->
            <div class="notice-meta">
        <span class="notice-time">
          <i class="el-icon-time"></i> 发布时间：{{ notice.sendTime }}
        </span>
                <span class="notice-publisher">
          <i class="el-icon-user"></i> 发布人：{{ notice.username || '系统管理员' }}
        </span>
            </div>

            <!-- 通知内容 -->
            <div class="notice-content" v-html="notice.content"></div>
        </el-card>
    </div>
</template>

<script>
    import request from "~/utils/request.js";
    export default {
        name: 'NoticeDetail',
        data() {
            return {
                notice: {
                    title: '',
                    createTime: '',
                    publisher: '',
                    content: '',
                    attatchments: []
                }
            }
        },
        activated() {
            this.fetchNoticeDetail();
        },
        methods: {
            // 获取通知详情
            fetchNoticeDetail() {
                const announceId = this.$route.query.announceId;
                // 这里应该是API调用，模拟数据
                request.get('/send-announce/stuFindSendAnnounceContent',{
                    params:{
                        announceId:announceId,
                        userId:this.$store.state.user.id,
                    }
                }).then(res => {
                    if (res.code === "200") {
                       this.notice = res.data;
                    }
                })

            },

            // 补零
            padZero(num) {
                return num < 10 ? `0${num}` : num;
            },

            // 返回上一页
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    .notice-detail-container {
        height: 78vh;
        padding: 20px;
        max-width: 1000px;
        margin: 0 auto;
    }

    .back-button {
        margin-bottom: 20px;
    }

    .notice-card {
        padding: 20px;
        min-height: 68vh;
        background: white;
    }

    .notice-title {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .notice-title h2 {
        margin: 0;
        color: #333;
    }

    .notice-meta {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
        color: #999;
        font-size: 14px;
    }

    .notice-meta span {
        margin: 0 15px;
    }

    .notice-content {
        line-height: 1.8;
        font-size: 16px;
        color: #444;
        padding: 0 20px;
        word-break: break-all; /* 处理长单词换行 */
        overflow-y: auto;
    }

    .notice-content >>> p {
        margin-bottom: 15px;
    }

    .notice-attachments {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .notice-attachments h4 {
        margin-bottom: 10px;
        color: #666;
    }

    .notice-attachments ul {
        list-style: none;
        padding-left: 0;
    }

    .notice-attachments li {
        margin-bottom: 8px;
    }

    .file-size {
        color: #999;
        font-size: 12px;
        margin-left: 5px;
    }
</style>
